<template>
  <div class="comment-main">
    <div class="comment-item">
      <div class="box">
        <div class="avatar">
          <img v-if="user" :src="user.avatar" alt="">
          <img v-else src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif" alt="">
        </div>
        <div class="ml-3">
          <div data-v-0089e256="" class="comment-input">
            <textarea placeholder="留下点什么吧..." v-model="commentContent" class="comment-textarea"></textarea>
          </div>
          <div class="comment-btn">
                        <span @click.stop="chooseEmoji = !chooseEmoji" class="emoji-btn"
                              @mouseenter="handleEmojiMouseEnter"
                              @mouseleave="handleEmojiMouseLeave">
                            <svg-icon :icon-class="emoji"></svg-icon>
                        </span>
            <el-button @click="addComment" style="" class="upload-btn v-comment-btn">
              提交
            </el-button>
          </div>
          <div class="emoji-wrapper" v-show="chooseEmoji">
            <Emoji @chooseEmoji="handleChooseEmoji"/>
          </div>
        </div>
      </div>
    </div>

    <ul class="commentwrap">
      <div class="comment-wrp">
        <li class="ul-item" ref="commentBoxref" v-for="(item, index) in commentList" :key="index">
          <!-- 评论内容 -->
          <div class="comment" @mouseenter="replyEnter(item.id, false)" @mouseleave="replyLeave(item.id)">
            <div class="main">
              <div class="profile">
                <a :href="item.webSite" target="_blank">
                  <img :src="item.avatar" alt="">
                </a>
              </div>
              <div class="commentinfo">
                <section class="commeta">
                  <div class="left">
                    <h4 class="author">
                      <a :href="item.webSite" target="_blank" class="disabled">
                        {{ item.nickname }}
                        <el-tooltip effect="dark" content="作者" placement="top"
                                    v-if="item.userId == articleUserId">
                          <svg-icon class="tag" icon-class="guanfang"></svg-icon>
                        </el-tooltip>
                      </a>
                    </h4>
                  </div>
                  <a href="javascript:;" :ref="'replyBtn' + item.id"
                     @click="replyComment(item, item.id, false)" class="comment-reply-link">回复</a>
                  <div class="right">
                    <div class="info">
                      <time itemprop="datePublished" datetime="1680523318635" class="comment-time">发布于
                        {{ item.createTimeStr }}
                      </time>
                      <span class="useragent-info">（
                                                <svg-icon :icon-class="item.browser"/>
                                                {{ item.browserVersion }} &nbsp;
                                                <svg-icon :icon-class="item.system"/>
                                                {{ item.systemVersion }}
                                                ）
                                            </span>
                      <span class="ipAddress">
                                                IP属地:{{ splitIpAddress(item.ipAddress) }}
                                            </span>
                    </div>
                  </div>
                </section>
                <div class="body markdown-body">
                  <div class="markdown-content">
                    <p>
                      {{ item.content }}
                    </p>
                  </div>
                </div>
                <!-- 回复框 -->
                <Reply :ref="'reply' + item.id" @reloadReply="reloadReply">
                </Reply>
              </div>
            </div>
          </div>
          <ul class="children">
            <div class="comment-wrp">
              <li class="ul-item" v-for="(childrenItem, childerenIndex) in item.children"
                  :key="childerenIndex">
                <!-- 评论内容 -->
                <div class="comment" @mouseenter="replyEnter(childrenItem.id, true)"
                     @mouseleave="replyLeave(childrenItem.id, true, index)">
                  <div class="main">
                    <div class="profile">
                      <a :href="childrenItem.webSite">
                        <img :src="childrenItem.avatar" alt="">
                      </a>
                    </div>
                    <div class="commentinfo">
                      <section class="commeta">
                        <div class="left">
                          <h4 class="author">
                            <a :href="childrenItem.webSite" target="_blank" class="disabled">
                              {{ childrenItem.nickname }}

                              <el-tooltip effect="dark" content="作者" placement="top"
                                          v-if="childrenItem.userId == articleUserId">
                                <svg-icon class="tag" icon-class="guanfang"></svg-icon>
                              </el-tooltip>
                            </a>
                          </h4>
                        </div>
                        <a href="javascript:;" :ref="'childrenBtn' + childrenItem.id"
                           @click="replyComment(childrenItem, item.id, true)"
                           class="comment-reply-link">回复</a>
                        <div class="right">
                          <div class="info">
                            <time itemprop="datePublished" datetime="1680523318635"
                                  class="comment-time">发布于
                              {{ childrenItem.createTimeStr }}
                            </time>
                            <span class="useragent-info">（
                                                            <svg-icon :icon-class="childrenItem.browser"/>
                                                            {{ childrenItem.browserVersion }} &nbsp;
                                                            <svg-icon :icon-class="childrenItem.system"/>
                                                            {{ childrenItem.systemVersion }}
                                                            ）
                                                        </span>
                            <span class="ipAddress">
                                                            IP属地:{{ splitIpAddress(childrenItem.ipAddress) }}
                                                        </span>
                          </div>

                        </div>
                      </section>
                      <div class="body markdown-body">
                        <div class="markdown-content">
                          <p>
                            <a href="javascript:;"
                               style="color: #99CE00;text-decoration: none;">@{{
                                childrenItem.replyNickname
                              }}</a>

                            {{ childrenItem.content }}
                          </p>
                        </div>
                      </div>
                      <!-- 回复框 -->
                      <Reply :ref="'replys' + childrenItem.id" @reloadReply="reloadReply">
                      </Reply>
                    </div>
                  </div>
                </div>
              </li>
            </div>
          </ul>
        </li>

        <!-- 分页按钮 -->
        <div>
          <sy-pagination :pageNo="pageData.pageNo" :pages="pages" @changePage="moreComment"/>
        </div>
      </div>
    </ul>
  </div>
</template>
<script>
import {postComment, featchComments} from '@/api/comment'
import {browserMatch} from '@/utils/index'
import Reply from './Reply.vue'
import Emoji from '@/components/emoji'

export default {
  components: {
    Reply,
    Emoji
  },
  props: {
    articleUserId: {
      type: String,
      default: "",
    }
  },
  data() {
    return {
      chooseEmoji: false,
      commentContent: "",
      opacity: 0,
      show: null,
      user: this.$store.state.userInfo,
      articleId: this.$route.params.articleId,
      // 加载层信息
      emoji: "emoji1",
      pageData: {
        pageNo: 1,
        pageSize: 5,
        articleId: this.$route.params.articleId
      },
      commentList: [],
      pages: 0,
    }
  },
  mounted() {
    this.getCommens()
    document.addEventListener("click", e => {
      if (e.target.className != "iconfont icon-biaoqing") {
        this.chooseEmoji = false
      }
    })
  },
  methods: {
    getCommens() {
      featchComments(this.pageData).then(res => {
        this.commentList = res.data.records
        this.pages = res.data.total;
      })
    },
    handleEmojiMouseEnter() {
      this.emoji = "emoji2"
    },
    handleEmojiMouseLeave() {
      this.emoji = "emoji1"
    },
    handleChooseEmoji(value) {
      this.commentContent += value
    },
    replyLeave(index, isChilderen) {
      if (isChilderen) {
        this.$refs[`childrenBtn${index}`][0].style.opacity = 0
      } else {
        this.$refs[`replyBtn${index}`][0].style.opacity = 0

      }
    },
    replyEnter(index, isChilderen) {
      if (isChilderen) {
        this.$refs[`childrenBtn${index}`][0].style.opacity = 1
      } else {
        this.$refs[`replyBtn${index}`][0].style.opacity = 1

      }
    },
    replyComment(item, parentId, isChilderen) {
      if (this.user == null) {
        this.$store.state.loginFlag = true;
        return
      }
      if (isChilderen) {
        this.$refs['replys' + item.id][0].showBox = !this.$refs['replys' + item.id][0].showBox
        //传值给回复框
        this.$refs['replys' + item.id][0].commentContent = "";
        this.$refs['replys' + item.id][0].nickname = item.nickname;
        this.$refs['replys' + item.id][0].replyUserId = item.userId;
        this.$refs['replys' + item.id][0].parentId = parentId;
        this.$refs['replys' + item.id][0].index = item.id;
      } else {
        this.$refs['reply' + item.id][0].showBox = !this.$refs['reply' + item.id][0].showBox
        //传值给回复框
        this.$refs['reply' + item.id][0].commentContent = "";
        this.$refs['reply' + item.id][0].nickname = item.nickname;
        this.$refs['reply' + item.id][0].replyUserId = item.userId;
        this.$refs['reply' + item.id][0].parentId = parentId;
        this.$refs['reply' + item.id][0].index = item.id;
      }
    },
    reloadReply(index) {
      let query = {
        pageNo: this.pageData.pageNo,
        pageSize: 5,
        articleId: this.articleId
      }

      featchComments(query).then(res => {
        this.commentList = res.data.records
      })
    },
    addComment() {
      if (this.user == null) {
        this.$store.commit("setLoginFlag", true)
        return
      }
      if (!this.commentContent) {
        this.$message.error('评论不能为空');
        return;
      }
      let browser = browserMatch()
      let comment = {
        articleId: this.articleId,
        avatar: "https://sdn.geekzu.org/avatar/eeb4fe09a1aaad7964b055f331f72608?s=256&d=monsterid",
        content: this.commentContent,
        browser: browser.browser.toLowerCase(),
        browserVersion: browser.browser + " " + browser.version,
      }
      postComment(comment).then(res => {
        this.pageData.pageNo = 1
        this.getCommens()
        this.$message.success('评论成功');
        this.$store.commit("isCommentFlag", true)
        this.commentContent = ""
      })
    },
    moreComment(val) {
      this.pageData.pageNo = val;
      featchComments(this.pageData).then(res => {
        this.commentList.push(...res.data.records)
        this.pages = res.data.pages;
      })
    },

    splitIpAddress(address) {
      return address.split("|")[1]
    },
  },
}
</script>
<style lang="scss" scoped>
.comment-main {
  .comment-item {
    border: 1px solid rgba(144, 147, 153, .31);
    border-radius: 4px;
    padding: 10px;
    margin: 10px 0 10px;
    background-color: var(--comment-backgroud-color);

    .box {
      display: flex;

      .avatar {
        line-height: normal;
        position: relative;
        vertical-align: middle;

        img {
          width: 40px;
          width: 40px;
          overflow: hidden;
          border-radius: 50%;
        }
      }

      .ml-3 {
        margin-left: 12px !important;
        width: 100%;
        position: relative;

        .comment-input {
          position: relative;

          .comment-textarea {
            font-size: .875rem;
            color: var(--article-content-color) !important;
            outline: none;
            padding: 10px 5px;
            min-height: 122px;
            resize: none;
            width: 100%;
            border-radius: 4px;
            background-color: transparent;
            border-style: none;
          }
        }

        .comment-btn {
          display: flex;
          align-items: center;
          margin: 10px 0;

          .emoji-btn {
            cursor: pointer;

            svg {
              width: 20px;
              height: 20px;
            }
          }

          .v-comment-btn {
            border: 1px solid var(--border-line);
            border-radius: 4px;
            text-align: center;
            padding: 10px 16px;
            font-size: 14px;
            transition: all .3s;
            outline: none;
            cursor: pointer;
          }

          @media screen and (max-width: 767px) {
            .upload-btn {

              margin-left: auto;
              color: #fff;
              background-color: var(--theme-color);
              position: relative;
            }
          }

          @media screen and (min-width: 768px) {
            .upload-btn {

              margin-left: auto;
              color: #fff;
              background-color: var(--theme-color);
              overflow: hidden;
              transition: all .5s;
              position: relative;

              &:hover {
                background-color: #00C853;
              }

              &:hover::before {
                left: 120%;
                transition: all .5s;
              }

              &::before {
                content: '';
                position: absolute;
                top: 0;
                left: -40%;
                width: 20%;
                height: 100%;
                background: linear-gradient(90deg, transparent, #fff, transparent);
                transform: skew(-45deg);
              }
            }
          }

        }

        .emoji-wrapper {
          position: absolute;
          top: 0px;
        }
      }
    }
  }

  .commentwrap {
    width: 100%;
    padding: 0;
    list-style: none;


    .comment-wrp {
      padding: 10px 0 16px 0;

      .more-btn {
        background-color: var(--theme-color);
        border-radius: 5px;
        text-align: center;
        line-height: 30px;
        padding: 3px 0;
        height: 30px;
        width: 100px;
        margin: auto;
        cursor: pointer;
        color: #fff;
      }

      .ul-item {
        clear: both;
        margin: 0;
        padding: 0;
        overflow: hidden;
        list-style: none;
        margin-bottom: 20px;
        border-bottom: 1px solid var(--border-line);

        &:last-child {
          border: 0;
          padding-bottom: 0;
        }

        .comment {
          width: 100%;
          padding-top: 10px;
          float: left;

          .main {
            float: right;
            width: 100%;
            padding: 0;

            &:last-child {
              border-bottom: 0;
            }

            .profile {
              float: left;
              margin-right: 10px;
              margin-top: 6px;

              a {
                text-decoration: none;
                color: var(--theme-color);

                img {
                  width: 100%;
                  max-width: 40px;
                  height: 40px;
                  border-radius: 100%;
                  box-shadow: 0 1px 10px -6px rgba(0, 0, 0, 0.5);
                  background-color: #f5f5f5;
                  transition: transform .75s;

                  &:hover {
                    transform: rotate(360deg);
                  }
                }

              }
            }

            .commentinfo {
              .commeta {
                font-size: 16px;
                margin-bottom: 5px;
                text-transform: uppercase;
                color: #9499a8;
                margin-left: 50px;

                section {
                  display: block;
                }

                .left {
                  .author {
                    font-size: 24px;
                    font-weight: 400;
                    margin: 0;
                    letter-spacing: 0px;
                    text-transform: none;
                    line-height: 20px;

                    a {
                      text-decoration: none;
                      color: var(--theme-color);
                      font-size: 14px;
                      font-weight: 600;

                      .tag {
                        width: 15px;
                        height: 15px;
                        vertical-align: -3px;
                      }
                    }
                  }

                }

                .comment-reply-link {
                  text-decoration: none;
                  font-size: 12px;
                  margin-left: 10px;
                  float: right;
                  text-transform: uppercase;
                  color: #fff;
                  background-color: var(--theme-color);
                  line-height: 20px;
                  padding: 0 6px;
                  border-radius: 3px;
                  opacity: 0;
                }

                .right {
                  .info {
                    margin-top: 2px;
                    font-size: 12px;
                    letter-spacing: 0px;
                    text-transform: none;
                    color: rgba(0, 0, 0, 0.35);

                    .comment-time {
                      display: inline-block;
                      margin-top: 6px;
                      font-size: 12px;
                      color: #657786;
                    }

                    .useragent-info {
                      color: #657786;

                      svg {
                        vertical-align: -2px;
                        width: 13px;
                        height: 13px;
                      }

                    }

                    .ipAddress {
                      color: #657786;
                    }
                  }
                }
              }

              .body {
                color: #63686d;
                position: relative;
                margin-bottom: 15px;
                line-height: 1;
                white-space: pre-line;
                word-break: break-all;
                font-size: 14px !important;
                word-wrap: break-word;

                .markdown-content {
                  padding: 10px;
                  white-space: pre-line;
                  word-break: break-all;
                  background: var(--comment-box);
                  border-radius: 0 8px 8px;
                }
              }
            }


          }

          .showd {
            padding-left: 40px;
          }
        }

        .children {
          padding: 0;
          list-style: none;
          margin-left: 40px;

          .comment-wrp {
            padding: 10px 0 16px 0;

            li {
              clear: both;
              margin: 0;
              padding: 0;
              overflow: hidden;
              list-style: none;
              margin-bottom: 20px;
              border-bottom: 1px solid var(--border-line);

              &:last-child {
                border: 0;
                margin-bottom: 0;
              }

              .comment {
                width: 100%;
                padding-top: 10px;
                float: left;

                .main {
                  float: right;
                  width: 100%;
                  padding: 0;

                  &:last-child {
                    border-bottom: 0;
                  }

                  .profile {
                    float: left;
                    margin-right: 10px;
                    margin-top: 6px;

                    a {
                      text-decoration: none;

                      img {
                        width: 100%;
                        max-width: 40px;
                        height: 40px;
                        border-radius: 100%;
                        box-shadow: 0 1px 10px -6px rgba(0, 0, 0, 0.5);
                        background-color: #f5f5f5;
                        transition: transform .75s;

                        &:hover {
                          transform: rotate(360deg);
                        }
                      }

                    }
                  }

                  .commentinfo {
                    .commeta {
                      font-size: 16px;
                      margin-bottom: 5px;
                      text-transform: uppercase;
                      color: #9499a8;
                      margin-left: 50px;

                      section {
                        display: block;
                      }

                      .left {
                        .author {
                          font-size: 24px;
                          font-weight: 400;
                          margin: 0;
                          letter-spacing: 0px;
                          text-transform: none;
                          line-height: 20px;

                          a {
                            text-decoration: none;
                            color: var(--theme-color);
                            font-size: 14px;
                            font-weight: 600;

                            .bozhu {
                              position: relative;
                              top: -1px;
                              display: inline-block;
                              min-width: 30px;
                              text-align: center;
                              font-size: 12px;
                              color: #fb7299;
                              font-weight: 400;
                              -webkit-transform: scale(0.9);
                              transform: scale(0.9);
                              border: 1px solid #fb7299;
                              border-radius: 4px;
                            }
                          }

                          .tag {
                            width: 15px;
                            height: 15px;
                            vertical-align: -3px;
                          }
                        }

                      }

                      .comment-reply-link {
                        text-decoration: none;
                        font-size: 12px;
                        display: block;
                        margin-left: 10px;
                        float: right;
                        text-transform: uppercase;
                        color: #fff;
                        background-color: var(--theme-color);
                        line-height: 20px;
                        padding: 0 6px;
                        border-radius: 3px;
                      }

                      .right {
                        .info {
                          margin-top: 2px;
                          font-size: 12px;
                          letter-spacing: 0px;
                          text-transform: none;
                          color: rgba(0, 0, 0, 0.35);

                          .comment-time {
                            display: inline-block;
                            margin-top: 6px;
                            font-size: 12px;
                            color: #657786;
                          }

                          .useragent-info {
                            color: #657786;

                            svg {
                              vertical-align: -2px;
                              width: 13px;
                              height: 13px;
                            }

                          }

                          .ipAddress {
                            color: #657786;
                          }
                        }
                      }
                    }

                    .body {
                      color: #63686d;
                      position: relative;
                      margin-bottom: 15px;
                      line-height: 1;
                      white-space: pre-line;
                      word-break: break-all;
                      font-size: 14px !important;
                      word-wrap: break-word;

                      .markdown-content {
                        padding: 10px;
                        white-space: pre-line;
                        word-break: break-all;
                        background: var(--comment-box);
                        border-radius: 0 8px 8px;
                      }
                    }
                  }

                }

                .showd {
                  padding-left: 40px;
                }
              }
            }
          }
        }
      }

    }

  }

}
</style>